<template>
  <button class="btn" :class="newClass" @click="clickFn">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'large'
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: true
    },
    inline: {
      type: Boolean,
      default: false
    },
    shadow: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    newClass () {
      console.log(this.$props)
      return {
        [this.type]: true,
        [this.size]: true,
        plain: this.plain,
        round: this.round,
        inline: this.inline,
        shadow: this.shadow
      }
    }
  },
  methods: {
    clickFn () {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
// default, primary, warning, disabled, link
.btn {
  @include wh(100%, 80px);
  @include flex(row, center, center);
  font-size: $font-size-m;
  border: 1px solid #ccc;
  &.shadow {
    box-shadow: 0px 2px 23px 0px rgba(255,72,60,0.48);
  }
  &.default {
    background: #fff;
    color: #333;
    border-color: #333;
  }
  &.primary {
    background: $base-background-color;
    color: #fff;
    border-color: transparent;
  }
  &.warning {
    background: #f00;
    color: #fff;
    border-color: #f00;
  }
  &.round {
    border-radius: 100px;
  }
  &.inline {
    @include wh(auto, 80px);
    display: inline-block;
    padding: 0 40px;
  }
  &.plain {
    background: transparent;
    border: 1px solid #ccc;
    box-shadow: none;
    &.primary {
      color: $base-color;
      border-color: $base-color;
    }
    &.warning {
      color: #f00;
      border-color: #f00;
    }
  }

  &:disabled {
    @include grayscale();
    opacity: 0.2;
  }

}
</style>
